<template>
  <div class="app-container">
    <el-tabs v-model="tabsListID" @tab-click="tabsToGetList" type="card">
      <el-tab-pane
        v-for="item in tabsList"
        :key="item.id"
        :label="item.name"
        :name="item.id"
      >
      </el-tab-pane>
    </el-tabs>

    <div v-if="showList[0]">
      <el-table v-loading="loadingCockpit" :data="arrayCockpit">
        <el-table-column label="总数" align="center" prop="total" />
        <el-table-column label="在线数量" align="center" prop="online" />
        <el-table-column label="离线数量" align="center" prop="offline" />
        <el-table-column
          label="完好率"
          align="center"
          prop="intactRatePercentage"
        />
      </el-table>
    </div>
    <div v-if="showList[1]">
      <el-table v-loading="loadingMonitor" :data="arrayPageMonitor">
        <el-table-column label="监控名称" align="center" prop="channelName" />
        <el-table-column label="监控状态" align="center" prop="stateResult">
          <template #default="scope">
            <div :style="scope.row.stateStyle">{{ scope.row.stateResult }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <el-button
              link
              type="primary"
              icon="Edit"
              @click="toView(scope.row)"
              v-hasPermi="['monitorCenter:cockpit:check']"
              >查看监控</el-button
            >
            <el-button
              link
              type="primary"
              icon="Edit"
              @click="toBackView(scope.row)"
              v-hasPermi="['monitorCenter:cockpit:backview']"
              >监控回放</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        align="center"
        background="true"
        @current-change="handleSelectionChangesMonitor"
        :page-size="pageSizeMonitor"
        :current-page="pageNumMonitor"
        :pager-count="11"
        layout="total,prev, pager, next,jumper"
        :total="totalMonitor"
        style="float: right; margin-top: 20px"
      />
      <monitor ref="hk" :realplay="ws"></monitor>
    </div>

    <div v-if="showList[2]">
      <el-table v-loading="loadingFireStatics" :data="arrayPageFireStatics">
        <el-table-column label="设备名称" align="center" prop="deviceName" />
        <el-table-column label="总数" align="center" prop="count" />
      </el-table>
      <el-pagination
        align="center"
        background="true"
        @current-change="handleSelectionChangesFireStatics"
        :page-size="pageSizeFireStatics"
        :current-page="pageNumFireStatics"
        :pager-count="11"
        layout="total,prev, pager, next,jumper"
        :total="totalFireStatics"
        style="float: right; margin-top: 20px"
      />
    </div>
  </div>
</template>
<style scoped lang="scss">
.app-container {
}
</style>
<script setup>
const tabsList = ref([
  { id: 0, name: "监控统计" },
  { id: 1, name: "重点监控" },
  { id: 2, name: "消防设备统计" },
  { id: 3, name: "告警类型占比" },
  { id: 4, name: "告警列表" },
]);
const tabsListID = ref(0);
const showList = ref([true, false, false, false, false]);

function tabsToGetList(pane) {
  let id = pane.props.name;
  let item = {};
  tabsList.value.forEach((item1) => {
    if (item1.id == id) {
      item = item1;
    }
  });
  showList.value = [false, false, false, false, false];
  showList.value[item.id] = true;
  switch (item.id) {
    case 0:
      getListCockpit();
      break;
    case 1:
      getListMonitor();
      break;
    case 2:
      getListFireStatics();
      break;
    case 3:
      break;
    case 4:
      break;
    default:
      break;
  }
  console.log(item);
}
import { getVideo } from "@/api/monitorCenter/cockpit";
const open = ref(false);
const videoUrl = ref("");
function toView(item) {
  let viewCode = {
    cameraIndexCode: item.channelIndexCode,
    streamType: 1,
    protocol: "ws",
  };
  let params = {
    pathId: "315",
    parameters: JSON.stringify(viewCode),
  };
  // console.log(getVideo(params));
  getVideo(params)
    .then((response) => {
      console.log(response);
      videoUrl.value = response.url;
      // open.value = true;
      hk.value.call.play(response.url, item.channelName || "实时监控");
    })
    .catch((error) => console.error("报错:", error.message));
}
function toBackView(item) {}

const { proxy } = getCurrentInstance();
import { onMounted } from "vue";

onMounted(() => {
  getListCockpit();
});
/** 查询操作列表 */
const arrayCockpit = ref([]);
import { listCockpit } from "@/api/monitorCenter/cockpit";
const loadingCockpit = ref(true);
function getListCockpit() {
  loadingCockpit.value = true;
  let params = {
    pathId: "313",
  };
  listCockpit(params).then((response) => {
    arrayCockpit.value = [];
    console.log(response);
    arrayCockpit.value.push(response);
    loadingCockpit.value = false;
  });
}

const arrayMonitor = ref([]);
import { listMonitor } from "@/api/monitorCenter/cockpit";
const loadingMonitor = ref(true);
function getListMonitor() {
  loadingMonitor.value = true;
  let params = {
    pathId: "313",
  };
  listMonitor(params).then((response) => {
    arrayMonitor.value = [];
    arrayMonitor.value = response;
    arrayMonitor.value.forEach((item1) => {
      if (item1.onlineStatus == 1) {
        item1.stateResult = "在线";
        item1.stateStyle = {
          color: "green",
        };
      } else if (item1.onlineStatus == 0) {
        item1.stateResult = "离线";
        item1.stateStyle = {
          color: "red",
        };
      }
    });
    console.log(arrayMonitor.value);
    getTableListMonitor();
    loadingMonitor.value = false;
  });
}
const pageNumMonitor = ref(1);
const pageSizeMonitor = ref(10);
const totalMonitor = ref(10);
const arrayPageMonitor = ref([]);
function handleSelectionChangesMonitor(page) {
  pageNumMonitor.value = page;
  getPageListMonitor(arrayMonitor.value);
}
const searchFlagMonitor = ref(0);
const searchListMonitor = ref([]);
const searchFormMonitor = ref({});
//取得分页数据
function getTableListMonitor() {
  //搜索判断
  if (searchFlagMonitor.value == 0) {
    getPageListMonitor(arrayMonitor.value);
  } else if (searchFlagMonitor.value == 1) {
    getPageListMonitor(searchListMonitor.value);
  }
}
import { emptyIsTrue } from "@/api/123wwwww/universalMethod";
function getPageListMonitor(tempList) {
  arrayPageMonitor.value = [];
  if (pageNumMonitor.value > totalMonitor.value / pageSizeMonitor.value) {
    pageNumMonitor.value = Math.ceil(
      totalMonitor.value / pageSizeMonitor.value
    );
  }
  if (pageNumMonitor.value <= 0) {
    pageNumMonitor.value = 1;
  }
  totalMonitor.value = tempList.length;
  if (!emptyIsTrue(tempList)) {
    for (
      let i = (pageNumMonitor.value - 1) * pageSizeMonitor.value;
      i < totalMonitor.value;
      i++
    ) {
      arrayPageMonitor.value.push(tempList[i]);
      if (arrayPageMonitor.value.length === pageSizeMonitor.value) break;
    }
  }
}

const arrayFireStatics = ref([]);
import { listFireStatics } from "@/api/monitorCenter/cockpit";
const loadingFireStatics = ref(true);
function getListFireStatics() {
  loadingFireStatics.value = true;
  let params = {
    pathId: "314",
  };
  listFireStatics(params).then((response) => {
    arrayFireStatics.value = [];
    arrayFireStatics.value = response;
    arrayFireStatics.value.forEach((item1) => {
      if (item1.onlineStatus == 1) {
        item1.stateResult = "在线";
        item1.stateStyle = {
          color: "green",
        };
      } else if (item1.onlineStatus == 0) {
        item1.stateResult = "离线";
        item1.stateStyle = {
          color: "red",
        };
      }
    });
    console.log(arrayFireStatics.value);
    getTableListFireStatics()
    loadingFireStatics.value = false;
  });
}

const pageNumFireStatics = ref(1);
const pageSizeFireStatics = ref(10);
const totalFireStatics = ref(10);
const arrayPageFireStatics = ref([]);
function handleSelectionChangesFireStatics(page) {
  pageNumFireStatics.value = page;
  getPageListFireStatics(arrayFireStatics.value);
}
const searchFlagFireStatics = ref(0);
const searchListFireStatics = ref([]);
const searchFormFireStatics = ref({});
//取得分页数据
function getTableListFireStatics() {
  //搜索判断
  if (searchFlagFireStatics.value == 0) {
    getPageListFireStatics(arrayFireStatics.value);
  } else if (searchFlagFireStatics.value == 1) {
    getPageListFireStatics(searchListFireStatics.value);
  }
}
function getPageListFireStatics(tempList) {
  arrayPageFireStatics.value = [];
  if (pageNumFireStatics.value > totalFireStatics.value / pageSizeFireStatics.value) {
    pageNumFireStatics.value = Math.ceil(totalFireStatics.value / pageSizeFireStatics.value);
  }
  if (pageNumFireStatics.value <= 0) {
    pageNumFireStatics.value = 1;
  }
  totalFireStatics.value = tempList.length;
  if (!emptyIsTrue(tempList)) {
    for (
      let i = (pageNumFireStatics.value - 1) * pageSizeFireStatics.value;
      i < totalFireStatics.value;
      i++
    ) {
      arrayPageFireStatics.value.push(tempList[i]);
      if (arrayPageFireStatics.value.length === pageSizeFireStatics.value) break;
    }
  }
}

// 取消按钮
function cancel() {
  open.value = false;
}

import monitor from "@/components/hk/play-Pop.vue";

const hk = ref(null);
const ws = ref(null);
</script>
